<template>
	<view class="container">
		<view class="header-top">导 航</view>
		<view class="message-list">
			<view class="header">
				<map class="nav-map" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="14"></map>
			</view>
			<view class="station-info" v-if="station">
				<view class="info-content">
					<view class="text-content">
						<view class="station-name">{{ station.name }}</view>
						<view class="station-address">{{ station.address }}</view>
					</view>
					<button class="nav-btn">导航</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const latitude = ref(34.826622) // 默认纬度
const longitude = ref(113.556722) // 默认经度

const station = ref(null)
const markers = ref([])

// 接收页面参数
onLoad((options) => {
	if (options && options.id) {
		fetchStationDetails(options.id)
	}
})

// 获取加油站详细信息
function fetchStationDetails(id) {
	uni.request({
		url: `http://localhost:9401/GesStation/${id}`,
		method: 'GET',
		header: {
			'Authorization': uni.getStorageSync('Token')
		},
		success: (res) => {
			console.log('加油站详情:', res)
			if (res.data.code === 200 && res.data.data) {
				const data = res.data.data
				station.value = data
			
				// 更新地图坐标和标记点
				if (data.latitude && data.longitude) {
					latitude.value = parseFloat(data.latitude)
					longitude.value = parseFloat(data.longitude)
					markers.value = [{
						id: 1,
						latitude: latitude.value,
						longitude: longitude.value,
						iconPath: '/static/whb/location.png', // 确保此路径正确
						width: 32,
						height: 32
					}]
				} else {
					uni.showToast({
						title: '加油站位置信息缺失',
						icon: 'none'
					})
				}

			} else {
				uni.showToast({
					title: res.data.msg || '获取加油站详细信息失败',
					icon: 'none'
				})
			}
		},
		fail: (error) => {
			console.error('获取加油站详情失败:', error)
			uni.showToast({
				title: '网络请求失败，请重试',
				icon: 'none'
			})
		}
	})
}
</script>

<style>
	.container {
		height: 200px;
		background-color: #007AFF;
	}

	.header-top {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
	}

	.message-list {
		background-color: white;
		margin: 30px 10px 0 10px;
	}

	.header {
		width: 100%;
		height: 85vh;
		position: relative;
	}

	.back-btn {
		position: absolute;
		top: 40rpx;
		left: 30rpx;
		z-index: 100;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 30rpx;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-map {
		width: 100%;
		height: 100%;
	}

	.station-info {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.info-content {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.text-content {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		padding-bottom: 40px;
	}

	.station-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.station-address {
		font-size: 28rpx;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #007AFF;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 40rpx;
		border: none;
		text-align: center;
	}
</style>